<template>
  <el-dialog :visible.sync="visible" :before-close="closeIp" class="formRef" width="450px" :close-on-click-modal="false" :destroy-on-close="true">
    <span style="color:#303753;font-size:14px;font-weight:600" slot="title">{{ title }}</span>
    <el-form :model="form" ref="formRef" label-position="top">
      <el-form-item v-if="visible">
        <span slot="label"><span style="color: #F56C6C;margin-right:4px">*</span>IP地址</span>
        <ip-input :ip.sync="form.ipBegin"></ip-input>
        <div class="line"></div>
        <ip-input :ip.sync="form.ipEnd"></ip-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeIp">取 消</el-button>
      <el-button type="primary" @click="submitIp">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import IpInput from '@/components/globalTool/search/ipInput.vue'
import { commonAction } from '@/utils/common'
import { ipValidate } from '@/utils/validate'
@Component({
  name: 'Tets',
  components: { IpInput }
})
export default class Test extends Vue {
  [x: string]: any
  @Ref() private readonly formRef: any
  private visible: boolean = false
  private title = '添加黑名单'

  private form: any = {
    ipBegin: '',
    ipEnd: ''
  }

  private openIp (data: any, type: string) {
    this.title = type === 'add' ? '添加黑名单' : '编辑黑名单'
    this.visible = true
    this.form = { ...data }
  }

  private closeIp () {
    this.form = {
      ipBegin: '',
      ipEnd: ''
    }
    this.visible = false
  }

  private submitIp () {
    this.formRef.validate(async valid => {
      if (valid) {
        if (!ipValidate(this.form.ipBegin) || !ipValidate(this.form.ipEnd)) {
          this.$message.error('IP地址输入不合法')
          return
        }
        let url = '/im-center/action/blacklist/addIpRangeConfig'
        if (this.form._id) {
          url = '/im-center/action/blacklist/updateIpRangeConfig'
        }
        const params = { url, method: 'POST', data: this.form }
        const result: any = await commonAction(params)
        if (result.success) {
          this.$message.success('保存成功')
          this.closeIp()
          this.$emit('getData');
        }
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.formRef
  >>> .el-dialog__body
        padding: 0px 24px
  .line
    width: 8px
    height: 2px
    background: #303753
    display: inline-block
    margin: 0px 12px
    margin-bottom: 3px
</style>
